<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>

<html>
	<head>
	<%
    	UserService userService = UserServiceFactory.getUserService();
    	User user = userService.getCurrentUser();
	%>
		<title>Sport</title>
		<link rel="stylesheet" href="customThemeJ/themes/StudyStatTheme1.min.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile.structure-1.0rc2.min.css" />
		<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/>
			
		<script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
		<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
		<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js' type="text/javascript" language="javascript"></script>
		<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script>

		
		<script type="text/javascript">
			function showhideTheorie() {
				if(document.getElementById("theorie").checked) {
					document.getElementById("pg").style.visibility = "visible";
				}
				else {
					document.getElementById("pg").style.visibility = "hidden";
				}
			}
			
			function showhideOef() {
				if(document.getElementById("oefeningen").checked) {
					document.getElementById("oef").style.visibility = "visible";
				}
				else {
					document.getElementById("oef").style.visibility = "hidden";
				}
			}
			function validate() {
				var ret = true;
			    if (!$('input:radio').is(':checked')) {
			       alert('Geef een rating!');
			        ret = false;
			    }
			    else if (<%= user.getUserId() %> == null) {
			    	alert('Gelieve in te loggen!');
			    	ret = false;
			    }
			    return ret;
			}
		</script>

			
	</head>
<body>
	<div data-role="page" data-theme="b">

	<div data-role="header" data-position="inline" data-theme="b">
		<a href="" data-icon="star" class="ui-btn-left" rel="external">Achievements</a>
		<h1>The Real Study Stat</h1>
		<a href="option.jsp" data-icon="gear" class="ui-btn-right" rel="external">Options</a>
		<div data-role="navbar">
			<ul>
			<li><a href="" rel="external">Home</a></li>
			<li><a href="" rel="external">Statistieken</a></li>
			<li><a href="" rel="external">Contact</a></li>
			<li><a href="" rel="external">Over Ons</a></li>
			<li><a href="" rel="external">Uitloggen</a></li>
		</ul>
		</div>
	</div>

	<div data-role="content">
		<div class="ui-grid-b">
			<div class="ui-block-a"></div>
			<div class="ui-block-b">
				<form action="/opmeten" method="post" data-ajax="false" onSubmit="return validate()">
				<br/>&nbsp;<br />
				<div>
					Gelieve een rating te geven aan je sportieve prestatie: <br/>&nbsp;<br />
					<div class="ui-grid-b">
						<div class="ui-block-a"></div>
						<div class="ui-block-b">
							<input name="star1" type="radio" value="rating1" class="star"/>
							<input name="star1" type="radio" value="rating2" class="star"/>
							<input name="star1" type="radio" value="rating3" class="star"/>
							<input name="star1" type="radio" value="rating4" class="star"/>
							<input name="star1" type="radio" value="rating5" class="star"/>
						</div>
						<div class="ui-block-c"></div>
					</div>
				</div>
				<br/>&nbsp;<br />
				<input type="hidden" name="userID" value= "<%= user.getUserId() %>"/>
				<input type="submit" name="submitsport" value="Doorsturen" id="submit_button"/>
				</form>
			</div>
		<div class="ui-block-c"></div>
		</div>
	</div>
	
	</div>
</body>
</html>